<template>
    <div class="cart">购物车商品列表</div>
    <ul>
        <li>
            <span>商品序号</span>
            <span>商品名称</span>
            <span>商品单价</span>
            <span>商品图片</span>
            <span>商品数量</span>
            <span>删除商品</span>
        </li>
        <li v-for="item in cart" :key="item.id">
            <span>{{item.id}}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.price }}</span>
            <span><img :src="item.src" alt=""></span>
            <span>{{ item.count }}</span>
            <span @click="remove(item.id)">删除商品</span>
        </li>
        
    </ul>
    <div>
        总金额：{{ total }},总数量：{{ count }}。<span @click="gotoProduct">我还要买</span>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useStore } from '../store';
import { useRouter } from 'vue-router';
//调用仓库
const store=useStore()
//定义响应式仓库对象
const {cart,total,count}=storeToRefs(store)
const remove=id=>{
    store.removeProduct(id)
}
const router=useRouter()
const gotoProduct=function(){
   router.push({name:'products'})
}
</script>

<style scoped>
.cart{
    font-size: 30px; 
    margin-top: 15px;
     font-weight: bold; 
     color: #ffaad5;
}
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

li img {
    width: 60px;
}

span {
    flex: 1;
    text-align: center;
    line-height: 60px;
}
</style>